import { Text, View } from 'native-base';
import React from 'react';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import { TouchableOpacity } from 'react-native';
import Picker from '../../../../component/Picker.tsx';
import { useReactive } from 'ahooks';

interface IAdditionalFormProps {
  item: IGoodsAdditionalInfo;
  edit?: boolean;
  onChange: (value: string) => void;
}
interface IState {
  communityList: Array<{ text: string; value: number | string }> | Array<Array<{ text: string; value: number | string }>>;
  pickerShow: boolean;
  result: { names: string; values: Array<string | number> };
}
export default function AdditionalFormPicker({ item, edit, onChange }: IAdditionalFormProps) {
  const state = useReactive<IState>({
    pickerShow: false,
    communityList: JSON.parse(item.fieldOptions).map((_item: any) => {
      return { text: _item.name, value: Number(_item.id) };
    }),
    result: { names: '', values: [] },
  });
  return (
    <React.Fragment>
      <View flexDirection={'row'} alignItems={'center'} py={4}>
        <View width={'25%'} flexDirection={'row'}>
          {item.requiredFlag && !edit && (
            <Text marginRight={1} color={CommonStyle.price}>
              *
            </Text>
          )}
          <Text marginRight={2} fontSize={12}>
            {item.attrName}
          </Text>
        </View>
        <TouchableOpacity style={{ flex: 1, borderRadius: 4, borderColor: CommonStyle.borderColor, borderBottomWidth: 1, paddingBottom: 8 }} onPress={() => (state.pickerShow = true)}>
          <Text> {state.result.names ? state.result.names : `请选择${item.attrName}`} </Text>
        </TouchableOpacity>
      </View>
      <Picker
        visible={state.pickerShow}
        data={state.communityList}
        onCancel={() => (state.pickerShow = false)}
        title={`选择${item.attrName}`}
        selected={state.result.values}
        closeOnClickOverlay={true}
        onChange={() => (state.pickerShow = false)}
        onConfirm={(result) => {
          state.pickerShow = false;
          state.result = result;
          onChange(result.values.toString());
        }}
      />
    </React.Fragment>
  );
}
